<template>
    <div class="RowLayout">
        <div class="RowView">
            <div class="Title Move"><layout-outlined /> {{ option.ViewName }}</div>
            <div class="options">
                <div class="icon" @click="ClickMappingOption">
                    <SettingOutlined />
                </div>
                <div class="icon" @click="DeleteItem(index)">
                    <DeleteOutlined />
                </div>
            </div>
            <slot></slot>
        </div>
    </div>
</template>
<script setup>
import { SettingOutlined, DeleteOutlined, LayoutOutlined } from "@ant-design/icons-vue";
import { inject } from "vue";
const emit = defineEmits(["DeleteChild"]);
const props = defineProps(["option", "index"]);
const DeleteItem = inject("DeleteItem");
const ClickMappingOption = inject("ClickMappingOption");
</script>
<style scoped>
.RowLayout {
    position: relative;
    padding: 8px;
    margin-bottom: 8px;
    background-color: #fff;
}

.Empty {
    border: 1px dashed #aaa;
    min-height: 36px;
    color: #aaa;
    text-align: center;
    line-height: 36px;
    background-color: rgb(241, 241, 241);
}

.ItemView {
    border: 1px dashed #aaa;
    min-height: 36px;
}

.RowView {
    border: 1px dashed #aaa;
    position: relative;
    /* */
}

.Title {
    padding: 0 8px;
    cursor: move;
}

.options {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
}

.icon {
    cursor: pointer;
    padding: 0 4px;
}

.icon:hover {
    color: #7974ff;
}
</style>
